﻿@{
    ViewBag.Title = "类型列表";

}
@section styles{
    @*<link href="~/static/css/Ztree.css" type="text/css" rel="stylesheet" />
        <link href="~/static/css/metroStyle.css" type="text/css" rel="stylesheet" />
        <link href="~/static/css/public.css" type="text/css" rel="stylesheet" />*@
    <link href="~/static/css/client.css" type="text/css" rel="stylesheet" />
    <link href="~/static/css/system.css" type="text/css" rel="stylesheet" />
    <link href="~/static/css/contract.css" type="text/css" rel="stylesheet" />
}
<style>
    a {
        text-decoration: none;
    }

    .brand_logo {
        width: 28px;
        height: 28px;
    }

    .hidden {
        display: none;
    }

    .layui-upload-img {
        max-width: 300px;
        max-height: 200px;
    }


    .new-label .layui-form-label {
        width: 35%;
        padding: 8px 15px;
        height: 38px;
        line-height: 20px;
        border: 1px solid #e6e6e6;
        border-radius: 2px 0 0 2px;
        text-align: center;
        background-color: #FBFBFB;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -webkit-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
        box-sizing: border-box !important;
    }

    .layui-form-radio {
        padding-left: 15px;
    }
</style>
<div class="layui-fluid layui-content">
    <div class="layui-title layui-clear layui-row">
        <h2 class="layui-col-md10 layui-col-sm9 layui-col-xs7">@ViewBag.Title</h2>
        <div class="layui-col-md2 layui-col-sm3 layui-col-xs5 layui-nav-item">
            <a class="layui-btn layui-btn-xs" onclick="LoadNewOpen('@Url.Action("Create")')">添加类型</a>
        </div>
    </div>
    <div class="layui-eacher layui-row layui-clear">
        <form class="layui-clear">
            <div class="layui-form layui-clear">
                <div class="layui-col-md6 layui-col-pc7 layui-col-lg7 layui-form-group">
                    <label class="layui-form-label">
                        关键词：
                    </label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="keyword" id="keyword" placeholder="请在这里输入关键词" />
                    </div>
                </div>
                <div class="layui-col-md1">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" id="search" type="button"> 搜索 </button>
                </div>
            </div>
        </form>
    </div>
    <div class="layui-data layui-table-container">
        <table class="layui-hide layui-table" id="layui-table" lay-filter="table"></table>
    </div>
</div>
<div id="Layer_ajax" class="deploy-plus"></div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

@section scripts{
    @*<script src="~/Theme/js/content.min.js?v=1.0.0"></script>*@
    <script src="~/static/js/jquery.ztree.core.js" type="text/javascript"></script>
    <script src="~/static/js/jquery.ztree.excheck.js" type="text/javascript"></script>
    <script src="~/static/js/jquery.ztree.exedit.js" type="text/javascript"></script>
    <script src="~/js/main.js"></script>
    @*<script src="~/Theme/js/plugins/layer/laydate/laydate.js"></script>*@
    <script type="text/javascript">
        var tableH = $(".layui-table-container").height();
        var layer, form, table, upload;
        layui.use(['form', 'layedit', 'laydate', 'tree', 'table', 'layer', 'upload'], function () {
            var layedit = layui.layedit
                , laydate = layui.laydate;

            layer = layui.layer
            upload = layui.upload;
            form = layui.form;
            table = layui.table;

            table.render({
                elem: "#layui-table",
                url: '/Genre/GetGenreData',
                cellMinWidth: 26,
                height: tableH,
                cols: [[
                    //{ type: 'checkbox' },
                    { field: 'typeName', align: 'center', title: '类型名称' },
                    {
                        field: 'isflagattr', title: '属性', align: 'center', templet: function (d) {
                            var btn = ''
                            if (d.isflagattr) {
                                btn = '<a class="layui-btn layui-btn-xs layui-btn-normal" onclick="editProps(' + "'" + d.id + "'" + ',' + "'" + 'Attr' + "'" + ')" >修改</a>';
                            }
                            else {
                                btn = '无';
                            }
                            return 'isflagattr', btn
                        }
                    },
                    {
                        field: 'ispro', title: '参数', align: 'center', templet: function (d) {
                            var btn = ''
                            if (d.ispro) {
                                btn = '<a class="layui-btn layui-btn-xs layui-btn-normal" onclick="editProps(' + "'" + d.id + "'" + ',' + "'" + 'Par' + "'" + ')">修改</a>';
                            }
                            else {
                                btn = '无';
                            }
                            return 'ispro', btn
                        }
                    },
                    {
                        field: 'isbrand', title: '关联品牌', align: 'center', templet: function (d) {
                            var btn = ''
                            if (d.isbrand) {
                                btn = '<a class="layui-btn layui-btn-xs layui-btn-normal" onclick="editProps(' + "'" + d.id + "'" + ',' + "'" + 'Brand' + "'" + ')">修改</a>';
                            }
                            else {
                                btn = '无';
                            }
                            return 'isbrand', btn
                        }
                    },
                    {
                        field: 'isSpec', title: '关联规格', align: 'center', templet: function (d) {
                            var btn = ''
                            if (d.isSpec) {
                                btn = '<a class="layui-btn layui-btn-xs layui-btn-normal" onclick="editProps(' + "'" + d.id + "'" + ',' + "'" + 'Spce' + "'" + ')">修改</a>';
                            }
                            else {
                                btn = '无';
                            }
                            return 'isSpec', btn
                        }
                    },
                    { title: '操作', align: 'center', toolbar: '#barDemo' }
                ]],
                id: "idTest",
                page: true,
                skin: 'line',
                even: true,//开启隔行背景
                size: 'lg' //小尺寸的表格
            });
            //监听工具条
            table.on('tool(table)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        $.get("/Genre/Delete?id=" + data.id, function (obj, successInfo) {
                            CommonAjaxCallback(obj, function () {
                                table.reload('idTest', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                })
                            }, successInfo)
                        })
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    LoadNewOpen("/Genre/Edit?id=" + data.id);
                }
            });
            $('#search').on('click', function () {
                table.reload('idTest', {
                    where: {
                        keyword: $('#keyword').val(),
                    },
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                })

            })

            $(".layer-open").on('click', function () {
                layer.closeAll();
                layer.msg('加载中', {
                    icon: 16
                    , shade: 0.01
                });
                var url = $(this).data('url');
                var title = $(this).data('title')
                if (!!url) {
                    url = url + ((url.indexOf("?") > -1) ? "&r=" : "?r=") + Math.random();//避免缓存
                    LayerOpen(title, url);
                }
            })

            function LayerOpen(title, url) {
                var open = layer.open({
                    type: 2,
                    title: title,
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['1400px', '800px'],
                    content: url,
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index)//确定两个页面的父子关系
                    },
                    end: function () {
                        //销毁后重新加载
                        table.reload('idTest', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        })
                    }
                });
            }

        });


        $("#layui-Area").click(function () {
            $(".layui-Area .layui-Area-hide").toggleClass("layui-Area-show")
            $(this).parent(".layui-form-select").toggleClass("layui-form-selected");
        });

        $(".layui-Area").mouseleave(function () {
            $(".layui-Area .layui-Area-hide").removeClass("layui-Area-show")
        })


        $(document).ready(function () {

        });
        var lock = false;//锁作为全局变量
        function LoadNewOpen(url) {
            if (lock) {
                return false;
            } else {
                lock = true;
            }
            $("#Layer_ajax").load(url, function (responseTxt, statusTxt, xhr) {
                if (statusTxt == "error") {
                    top.layer.msg('页面加载失败！', {
                        icon: 2,
                        time: 2000
                    });
                    return false;
                }
                form.render('radio')

                $.validator.unobtrusive.parse(this);
                var height = $("#Layer_ajax").height();
                layer.open({
                    type: 1,
                    shadeClose: true,
                    title: false,
                    closeBtn: 0,
                    scrollbar: false,
                    content: $("#Layer_ajax"),
                    area: ["600px", height],
                    success: function (layero, index) {
                        //锁关闭
                        lock = false;
                    },
                    end: function () {
                        $("#Layer_ajax").empty();
                    }
                })
            })
        }

        function ReloadAjaxCallbackgoback(data, successInfo) {
            CommonAjaxCallback(data, function () {
                table.reload('idTest', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                })
            }, successInfo)
        }


        function editProps(typeid, option) {
            var title = "修改";
            var url = "";
            var area = ['900px', '500px'];
            if (option == "Attr") {
                title = "修改属性";
                url = '/Genre/EditAttr?id=' + typeid;
            } else if (option == "Par") {
                title = "修改参数";
                url = '/Genre/EditPar?id=' + typeid;
            } else if (option == "Brand") {
                title = "关联品牌";
                area = ['900px', '500px'];
                url = '/Genre/AssociatedBrand?id=' + typeid;
            } else if (option == "Spce") {
                title = "关联规格";
                area = ['900px', '500px'];
                url = '/Genre/AssociatedSpce?id=' + typeid;
            }

            var open = layer.open({
                type: 2,
                title: title,
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: area,
                content: url,
                //btn: ['保存'],
                //yes: function () {
                //    $(that).click();
                //},
                success: function (layero, index) {
                    //var body = layer.getChildFrame('body', index)//确定两个页面的父子关系
                }
            });

        }
    </script>
}